// 头部内容
import "./homeTop.scss";
import { UserOutlined, MobileOutlined } from "@ant-design/icons";
import { observer, inject } from "mobx-react";
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'
import { message ,Modal} from "antd";


export default inject('store')(observer(props => {
  const { store } = props
  const nav = useNavigate()
  const { confirm } = Modal;
  /**
   * 退出登录
   * **/
  const del = () => {
    confirm({
      title: '您确定要退出吗？',
      icon: <ExclamationCircleOutlined />,
      onOk() {
        store.setRabbit({})
        message.success('退出成功')
        nav('/login')
      },
      onCancel() { },
    });
  }

  return (
    <div className="layouts-home-top">
      {/* 头部黑框 */}
      <div>
        <ul>

          {store.rabbit.token ?
            <>
              <li >
                <a href="/member">
                  <UserOutlined /> {store.rabbit.account}
                </a>
              </li>
              <li>
                <a onClick={del}>退出登录</a>
              </li>
            </> :
            <> <li>
              <a href="/login">请先登录</a>
            </li>
              <li>
                <a href="javascript:;">免费注册</a>
              </li>
            </>
          }
          <li>
            {/* 跳页面 */}
            <a href="/member/order">我的订单</a>
          </li>
          <li>
            <a href="javascript:;">会员中心</a>
          </li>
          <li>
            <a href="javascript:;">帮助中心</a>
          </li>
          <li>
            <a href="javascript:;">关于我们</a>
          </li>
          <li>
            <a className="last" href="javascript:;">
              <MobileOutlined /> 手机版
            </a>
          </li>
        </ul>
      </div>
    </div>
  )

}))
